<template>
  <div id="user">
    <el-container direction="vertical" style="width:500px;height:100%;margin:auto;marin-top:10px;" >
      <el-header height="10px;">
      </el-header>
      <el-form ref="userForm" :model="user" :rules="rules" label-width="80px" :label-position="labelPosition">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input v-model="user.school" ></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="user.address"></el-input>
        </el-form-item>
        <el-form-item label="自我介绍" prop="introduction">
          <el-input type="textarea" v-model="user.introduction"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('userForm')">添加</el-button>
          <el-button @click="resetForm('userForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "user",
  data:function(){
    return {
      labelPosition:"left",
      user:{id:"",username:"",email:"",school:"",phone:"",address:"",introduction:""},
      rules: {
          username: [
            { required: true, trigger: 'blur',message:'请输入姓名' },
            { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'change' },
            { type: 'email',message: '邮箱格式错误', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '请输入手机', trigger: 'change' }
          ]
        }
    }
  },
  methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addUser();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addUser:function(){
        var url = this.HOST+"/user";
        let data = this.user;

        this.$http.post(url,JSON.stringify(data))
        .then((res)=>{
          if(res.body.result=='success'){
                this.$message({
                    type: "success",
                    message: "添加成功!"
                });
                this.users = [];
				this.resetForm('userForm');
            }else{
                this.$message.error('添加失败，请重试！');
            }
          
        });
      }

  }
}

</script>

<style>
</style>